import React,{useState,useCallback} from "react";
import {KeyOutlined} from '@ant-design/icons'
import {Button,Input, Form, Modal, message} from 'antd'
import request from "@/utils/request";

function ChangePassword(props) {
    const [isModalVisible, setIsModalVisible] = useState(false);
    const passwordId = props.passwordId
    const showModal = () => {
        setIsModalVisible(true);
      };
    
      const handleOk = () => {
        setIsModalVisible(false);
      };
    
      const handleCancel = () => {
        setIsModalVisible(false);
      };
      const onFinish = useCallback(async (values) => {
        const {data} = await request.patch(`/user/${passwordId._id}/changepassword`,{
            password:values.password
        })
        if(data.code === 201){
          props.newList()
          setIsModalVisible(false)
          message.success('修改成功！')
        }
      },[])
    return(
        <>
        <Button style={{marginLeft:-20}} type="link" block onClick={showModal}><KeyOutlined />修改密码</Button>
        <Modal title="修改密码" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} onFinish={onFinish} footer={null}>
            <Form
            name="basic"
            labelCol={{
                span: 8,
            }}
            wrapperCol={{
                span: 16,
            }}
            initialValues={{
                remember: true,
            }}
            onFinish={onFinish}
            autoComplete="off"
            >

            <Form.Item
                label="请输入密码"
                name="password"
                rules={[
                {
                    required: true,
                    message: 'Please input your password!',
                },
                ]}
            >
            <Input.Password />
            </Form.Item>

            <Form.Item
                wrapperCol={{
                offset: 8,
                span: 16,
                }}
            >
            <Button type="primary" htmlType="submit">
            提交密码
            </Button>
            </Form.Item>
            </Form>
        </Modal>
        </>
    )
}

export default ChangePassword